﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>loginsettings</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <link href="loginsettings.css" rel="stylesheet" />
    <script src="loginsettings.js"></script>
</head>
<body>
    <div id="login-settings-flyout" data-win-control="WinJS.UI.SettingsFlyout" aria-label="Login settings flyout" data-win-options="{settingsCommandId:'login',width:'narrow'}">
        <div class="win-ui-dark win-header">
            <button type="button" onclick="WinJS.UI.SettingsFlyout.show()" class="win-backbutton"></button>
            <div class="win-label">Login</div>
            <img src="../../images/trakt-logo.png" style="position: absolute; right: 40px;" />
        </div>
        <div class="win-content ">
            <div class="win-settings-section">
                <div id="user-login-wrapper">
                    <p>If you want to personalize the app with your shows and sync between your devices login with your trakt.tv account.</p>
                    <h3>Trakt.tv login:</h3>
                    <form id="login-form">
                        <input id="login-username-input" type="text" placeholder="username" />
                        <br />
                        <input id="login-password-input" type="password" placeholder="password" />
                        <br />
                        <span>New to trakt.tv? <a href="http://trakt.tv/join">Sign up now</a></span>
                        <br />
                        <button id="login-btn">Login</button>
                    </form>
                    <p id="error-output"></p>
                </div>
                <div id="user-logout-wrapper" class="hidden">
                    <p>You are currently logged in as <span id="username-container"></span>.</p>
                    <br />
                    <button id="logout-btn">Logout</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
